<template>
  <section>
    <el-card>
      <h3>编辑商户</h3>
      <el-form label-position="top">
        <el-row :gutter="100">
          <el-col :span="9">
            <el-form-item label="类型" >
              <el-input v-model="userInfo.userTypeName"  :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="名称" >
              <el-input v-model="userInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人" >
              <el-input v-model="userInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select  v-model="userInfo.status" placeholder="请选择" >
                <el-option v-for="item in status" :label="item.value" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别">
              <el-select  v-model="userInfo.gender" placeholder="请选择">
                <el-option v-for="item in genders" :label="item.value" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
          <el-form-item label="商户编号">
            <el-input v-model="userInfo.code"  :disabled="true"></el-input>
          </el-form-item>
            <el-form-item label="手机号" >
              <el-input v-model="userInfo.phoneNormalized"></el-input>
            </el-form-item>
            <el-form-item label="城市">
              <el-select v-model="userInfo.cityCode">
                <el-option-group v-for="group in cities"  :label="group.text">
                  <el-option v-for="item in group.children"   :label="item.text" :value="item.value"></el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="密码确认">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="费率" v-if="userInfo.userType=='dealer'">
              <el-input-number :min="0" :max="1" :step="0.001" v-model="userInfo.feeRate"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card v-if="userInfo.userType=='dealer'">
      <el-form>
        <h3>审核类型</h3>
        <el-row :gutter="100">
          <el-col :span="7">
            <el-form-item label="资金账户编号" >
              <el-input v-model="userInfo.ledgerCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="资金账户类型">
              <el-select  placeholder="请选择" v-model="userInfo.customerType">
                <el-option v-for="item in customerTypes" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="签约名">
              <el-input v-model="userInfo.signedName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card  v-if="userInfo.userType=='dealer'">
      <el-form>
        <h3>出款银行卡</h3>
        <el-row :gutter="100">
          <el-col :span="8">
            <el-form-item label="银行卡号">
            <el-input v-model="bankInfo.number"></el-input>
            </el-form-item>
            <el-form-item label="开户行">
            <el-input v-model="bankInfo.bankName"></el-input>
            </el-form-item>
            <el-form-item label="开户市">
            <el-input v-model="bankInfo.bankCity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户人名">
              <el-input v-model="bankInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="公私类别">
              <el-select  v-model="bankInfo.accountType" placeholder="请选择" >
                <el-option v-for="item in accountTypes" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称">
              <el-input v-model="bankInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="开户省">
              <el-input v-model="bankInfo.bankProvince"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <h3>个人资料</h3>
      <el-form label-position="top">
        <el-row :gutter="100">
          <el-col :span="9">
            <el-form-item label="身份证号" >
              <el-input v-model="userInfo.idCardNumber"></el-input>
            </el-form-item>
            <el-form-item label="身份证照片" >
              <el-input v-model="userInfo.idCardPicture"></el-input>
            </el-form-item>
            <el-form-item label="身份证背面照片" >
            <el-input v-model="userInfo.idCardBackPicture"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" v-if="userInfo.userType=='dealer'">
            <el-form-item label="银行卡照片">
              <el-input v-model="userInfo.bankCardPicture"  ></el-input>
            </el-form-item>
            <el-form-item label="银行卡背面照片" >
              <el-input v-model="userInfo.bankCardBackPicture"></el-input>
            </el-form-item>
            <el-form-item label="手持身份证照片">
              <el-input v-model="userInfo.personPhoto"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card v-if="userInfo.userType=='dealer'">
      <h3>企业资料</h3>
      <el-form label-position="top">
        <el-row :gutter="100">
          <el-col :span="9">
            <el-form-item label="法人" >
              <el-input v-model="userInfo.legalPerson"></el-input>
            </el-form-item>
            <el-form-item label="营业执照图片" >
              <el-input v-model="userInfo.businessLicencePicture"></el-input>
            </el-form-item>
            <el-form-item label="工商证照片" >
              <el-input v-model="userInfo.businessCertPicture"></el-input>
            </el-form-item>
            <el-form-item label="组织机构代码证照片" >
              <el-input v-model="userInfo.orgCodePicture"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" v-if="userInfo.userType=='dealer'">
            <el-form-item label="营业执照编号">
              <el-input v-model="userInfo.businessLicenceNumber"  ></el-input>
            </el-form-item>
            <el-form-item label="税务登记证照片" >
              <el-input v-model="userInfo.taxRegPicture"></el-input>
            </el-form-item>
            <el-form-item label="银行开户许可证照片">
              <el-input v-model="userInfo.bankLisencePicture"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-button>更新用户</el-button>
      <el-button>取消修改</el-button>
      <el-button type="danger" style="float:right">删除此商户</el-button>
    </el-card>

  </section>
</template>
<style>

</style>
<script>
  export default {
     created(){
       this.loadData()
       this.loadCity()
       this.loadStatus()
       this.loadGender()
       this.loadBank()
       this.loadBanAccountType()
     },
     data(){
        return{
          userInfo:{
            status:'',
            gender:'',
            name:'',
            username:'',
            password:'',
            passwordConfirmation: '',
            code:'',
            userType:'',
            userTypeName:'',
            phoneNormalized:'',
            cityName:'',
            idCardNumber:'',
            idCardPicture:'',
            idCardBackPicture:'',
            bankCardPicture:'',
            bankCardBackPicture:'',
            personPhoto:'',
            customerType:'',
            ledgerCode:'',
            legalPerson:'',
            businessLicenceNumber:'',
            businessLicencePicture:'',
            taxRegPicture:'',
            bankLisencePicture:'',
            businessCertPicture:'',
            orgCodePicture:'',
            signedName:'',
            feeRate:''
          },
          bankInfo:{
            name: '',
            number: '',
            cashable: '',
            bankName: '',
            username: '',
            accountType: '',
            bankProvince: '',
            bankCity: '',
          },
          cities: {
				    text: ''
				  },
				  status:[{
		        name:'',
		        value:''
		      }],
		      genders:[{
		        name:'',
		        value:''
		      }],
		      accountTypes:[{
		        name:'',
		        value:'',
		      }],
		      customerTypes:[{name:'个人',value:'PERSON'},{name:'企业',value:'ENTERPRISE'}]
        }
     },
     methods:{
       loadData(){
          let id=this.$route.params.id
          this.axios.get(`users/${id}`).then(response=>{this.userInfo=response.data})
       },
       loadCity(){
          this.axios.get("/cities").then(response =>{
          this.cities=response.data})
       },
       loadStatus(){
        this.axios.get("users/status").then(response=>{this.status=response.data})
       },
        loadGender(){
        this.axios.get("users/genders").then(response=>{this.genders=response.data})
       },
       loadBank(){
          let id=this.$route.params.id
         this.axios.get(`bank_accounts/${id}`).then(response=>{this.bankInfo=response.data})
       },
       loadBanAccountType(){
          this.axios.get("bank_accounts/account_types").then(response=>{this.accountTypes=response.data})
       }
     }

  }

</script>
